﻿<div class="form-inline">
    <div class="row">
        <div class="form-group col-12">
            <Toggle OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="双向绑定示例"></Toggle>
        </div>
        <div class="form-group col-12">
            <div>绑定数值: @Model.BindValue</div>
        </div>
        <Divider Text="自定义标签" />
        <div class="form-group col-12">
            <p>设置 <code>DisplayText</code> 值为 <b>自定义标签</b></p>
        </div>
        <div class="form-group col-12">
            <Toggle OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="自定义标签" ShowLabel="true"></Toggle>
        </div>
        <Divider Text="占位" />
        <div class="form-group col-12">
            <p>无论是否设置 <code>DisplayText</code> 值，当 <code>ShowLabel</code> 为 <code>true</code> 时均显示</p>
        </div>
        <div class="form-group col-12">
            <Toggle OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" ShowLabel="true"></Toggle>
        </div>
        <Divider Text="不占位" />
        <div class="form-group col-12">
            <p>无论是否设置 <code>DisplayText</code> 值，当 <code>ShowLabel</code> 为 <code>false</code> 时均不显示</p>
        </div>
        <div class="form-group col-12">
            <Toggle OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="不显示" ShowLabel="false"></Toggle>
        </div>
    </div>
</div>

@code {
    class Foo
    {
        /// <summary>
        /// 
        /// </summary>
        [DisplayName("绑定标签")]
        public bool BindValue { get; set; }
    }

    private Foo Model { get; set; } = new Foo();
}